<!-- 绑定/更换手机号 changeMobile  -->
<template>
	<view>
		<!-- 标题栏 -->
		<view class="head-box ss-m-b-60">
			<view class="head-title ss-m-b-20">
				{{ userInfo.verification.mobile ? '更换手机号' : '绑定手机号' }}
			</view>
			<view class="head-subtitle">为了您的账号安全，请使用本人手机号码</view>
		</view>

		<!-- 表单项 -->
		<uni-forms
			ref="changeMobileRef"
			v-model="state.model"
			:rules="state.rules"
			validateTrigger="bind"
			labelWidth="140"
			labelAlign="center"
		>
			<uni-forms-item name="mobile" label="手机号">
				<uni-easyinput
					placeholder="请输入手机号"
					v-model="state.model.mobile"
					:inputBorder="false"
					type="number"
				>
					<template v-slot:right>
						<button
							class="ss-reset-button code-btn-start"
							:disabled="state.isMobileEnd"
							:class="{ 'code-btn-end': state.isMobileEnd }"
							@tap="sendCode('changeMobile', state.model.mobile)"
						>
							{{ getSmsTimer('changeMobile') }}
						</button>
					</template>
				</uni-easyinput>
			</uni-forms-item>

			<uni-forms-item name="code" label="验证码">
				<uni-easyinput
					placeholder="请输入验证码"
					v-model="state.model.code"
					:inputBorder="false"
					type="number"
					maxlength="4"
				>
					<template v-slot:right>
						<button class="ss-reset-button login-btn-start" @tap="changeMobileSubmit">
							确认
						</button>
					</template>
				</uni-easyinput>
			</uni-forms-item>
		</uni-forms>
		<button
			v-if="'WechatMiniProgram' === $platform.name"
			class="ss-reset-button type-btn"
			open-type="getPhoneNumber"
			@getphonenumber="getPhoneNumber"
		>
			使用微信手机号
		</button>
		<Verify
			@success="success"
			:mode="'pop'"
			:captchaType="'blockPuzzle'"
			:imgSize="{ width: '330px', height: '155px' }"
			:top="0"
			ref="verifyRef"
		></Verify>
	</view>
</template>

<script setup>
	import { computed, watch, ref, reactive, unref } from 'vue';
	import user from '/shop/store/user.js';
	import $user from '/shop/api/user.js';
	import $platform from '/shop/platform/index.js';
	import $helper from '/shop/helper/index.js';
	import { code, mobile } from '/shop/validate/form';
	import { showAuthModal, closeAuthModal, getSmsCode, getSmsTimer } from '/shop/hooks/useModal';
	import test from '/shop/helper/test.js';
	import Verify from '/shop/components/verify/verify.vue';
	const verifyRef = ref();
	const changeMobileRef = ref(null);
	const userInfo = computed(() => user().userInfo);
	// 数据
	const state = reactive({
		isMobileEnd: false, // 手机号输入完毕
		model: {
			mobile: '', // 手机号
			code: '', // 验证码
		},
		rules: {
			code,
			mobile,
		},
	});

	// 5.绑定手机号
	async function changeMobileSubmit() {
		const validate = await unref(changeMobileRef)
			.validate()
			.catch((error) => {
				console.log('error: ', error);
			});
		if (!validate) return;
		$user.changeMobile(state.model).then((res) => {
			if (res.error === 0) {
				user().getInfo();
				closeAuthModal();
			}
		});
	}

	// 使用微信手机号
	async function getPhoneNumber(e) {
		if (e.detail.errMsg !== 'getPhoneNumber:ok') {
		} else {
			console.log('微信手机号： ', e.detail);

			let result = await $platform.useProvider().bindUserPhoneNumber(e.detail);
			if (result) {
				user().getInfo();
				closeAuthModal();
			}
		}
	}
	let event_code = '';
	let mobile_code = '';
	const sendCode = (event, mobile = '') => {
		if (!mobile) {
			$helper.toast('手机号码不能为空');
			return;
		}
		if (!test.mobile(mobile)) {
			$helper.toast('手机号码格式不正确');
			return;
		}
		verifyRef.value.show();
	};

	const success = (data) => {
		console.log('data: ', data);
		getSmsCode(event_code, mobile_number, data.captchaVerification, callback);
	};
	const callback = () => {
		console.log('回调....');
		state.isMobileEnd = true;

		setTimeout(() => {
			state.isMobileEnd = false;
		}, 60000);
	};
</script>

<style lang="scss" scoped>
	@import '../index.scss';
</style>
